<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>DIV+CSS CSDN网站布局实例</title>
        <style type="text/css">
            /*公共样式*/
            body,div,span,a,h1,h2,h3,h4,h5,h6,ul,li,ol,table,tr,td,th,p,img{margin:0px;padding:0px}
            ul{list-style: none;}
            .clear{clear:both;width:100%;height:5px;}
            
            #container{width:1200px;margin:0px auto;}

            #header{width:100%;height:30px;}
            #header ul li {width:50px;float:left;line-height:20px; margin-left:5px;}
            #header ul li a{
                color:black;
                text-decoration: none;
                line-height: 20px;
                font-size: 15px;
                /*font-weight: bold;*/
                text-align: center;
                width:80px;
                height:20px;
                display: block;
                }

            #nav{width:100%;height:30px;margin-top:5px;background-color:#dcdcdc;}
            #nav ul li {width:80px;float:left;line-height:30px; margin-left:20px;}
            #nav ul li a{
                color:black;
                text-decoration: none;
                line-height: 30px;
                font-size: 15px;
                /*font-weight: bold;*/
                text-align: center;
                width:80px;
                height:30px;
                display: block;
                }
            #nav ul li a:hover{color:red;background-color:#fff;}

            
            #main{width:100%;}
            
            #article{width:992px;height:900px;float:right;background-color:#ffb6c1;}
            #aside1{width:180px;height:600px;float:left;background-color:#f5f5f5;margin-left:10px}
            #aside1 ul li{font-size:16px;font-family:'微软雅黑';margin:7px;line-height: 2.0}
            #aside1 ul li a{text-decoration: none;line-height: 50px;font-size: 15px;}

            #aside2{width:180px;height:300px;float:left;background-color:#f5f5f5;margin:10px}
            #aside2 ul li{margin-left:24px;margin-bottom:24px;font-size:12px;font-family:'微软雅黑'}


            #footer{width:100%;margin-top:5px;}

        </style>
    </head>
    <body>
        <div id="container">
            <!-- 页头开始 -->
            <div id="header">
                <ul>
                    <li><a href="#">首页</a></li> 
                    <li><a href="#">博客</a></li> 
                    <li><a href="#">学院</a></li> 
                    <li><a href="#">下载</a></li> 
                    <li><a href="#">图文课</a></li> 
                    <li><a href="#">论坛</a></li> 
                    <li><a href="#">APP</a></li> 
                    <li><a href="#">问答</a></li> 
                    <li><a href="#">商城</a></li> 
                    <li><a href="#">VIP会员</a></li> 
                    <li><a href="#">活动</a></li> 
                    <li><a href="#">招聘</a></li> 
                    <li><a href="#">ITeye</a></li> 
                    <li><a href="#">GitChat</a></li>                     
                    <a style="margin-left:50px">搜索</a>
                    <input type="text" name="search" placeholder="搜索学院课程">
                    <li style="float:right"><a href="#">消息</a></li> 
                    <li style="float:right"><a href="#">小程序</a></li> 
                    <li style="float:right"><a href="#">写博客</a></li> 
                </ul>

            </div>
            <!-- 页头结束 -->

            <!-- 导航开始-->
            <div id="nav">
                <ul>
                    <li><a href="#">视频课</a></li>          
                    <li><a href="#">讲师</a></li>
                    <li><a href="#">直播</a></li>
                    <li><a href="#">每日秒杀</a></li>
                    <li><a href="#">会员</a></li>
                    <li><a href="#">会员免费</a></li>
                    <li><a href="#">3月限免</a></li>
                    <li><a href="#">TinyMind</a></li>
                    <li><a href="#">课程答疑</a></li>
                    <li><a href="#">证书查询</a></li>
                    <li><a href="#">我要开课</a></li>
                </ul>
            </div>
            <!-- 导航结束-->
            <div class="clear"></div>
            <div id="main">
                <div id="article">
                    <style>
                         ul.navi{width:975px;height:35px;padding-left:10px;border-top:0px;border-right:0px;border-left:0px;border-bottom:1px;border-style:solid;border-color:rgba(236,236,236,0.8); margin-left: :10px;display: block;}       
                        li.title{float:left;}
                        li a{text-decoration: none;}
                        
                        #first{border-top:0px;border-right:1px;border-left:0px;border-bottom:0px;border-style:solid;padding-right:20px;}
                        ul.filter{width:960px;height:25px;background-color:rgb(236,236,236);                        
                        position:absolute;top:80px;margin-left:20px;padding-left:10px;}                                             
                        ul.list{width:975px;height:85px;position:absolute;top:90px;margin-top:30px;}
                        a.inner{margin-left:20px;position:absolute;top:-90px;position:relative;}
                        li.square{width:950px;height:140px;
                        margin-left:10px;margin-bottom:0px;
                        border-top:0px;border-right:0px;border-left:0px;border-bottom:1px;border-style:solid;
                        order-color:rgba(236,236,236,0.8);}
                        li.square:hover{width:950px;height:140px;background-color:rgb(236,236,236);margin-left:10px;}
                        img{margin-top:10px;}


                    </style>
                    <ul class="navi">
                        <li class="title"><a href="https://edu.csdn.net/mycollege" target="_blank">已购课程</a></li>
                        <li class="title"><a href="https://edu.csdn.net/mycollege/recentlyUsedCourse" target="_blank">最近播放的</a></li>
                        <li class="title"><a href="https://edu.csdn.net/mycollege/favorate" target="_blank">收藏的课程</a></li>
                        <li class="title"><a href="https://edu.csdn.net/mycollege/promotionCourse" target="_blank">活动课程</a></li>
                    </ul>
                    <ul class="filter">
                        <li class="title in" id="first"><span style="font-size:14px">类型</span></li>
                        <li class="title in"><a href="https://edu.csdn.net/mycollege" target="_blank">全部</a></li>
                        <li class="title in"><a href="https://edu.csdn.net/mycollege/recentlyUsedCourse" target="_blank">课程</a></li>
                        <li class="title in"><a href="https://edu.csdn.net/mycollege/favorate" target="_blank">套餐</a></li>
                        <li class="title in"><a href="https://edu.csdn.net/mycollege/promotionCourse" target="_blank">直播</a></li>
                        <li class="title in"><a href="https://edu.csdn.net/mycollege/promotionCourse" target="_blank">教学中心</a></li>
                        <li class="title in"><a href="https://edu.csdn.net/mycollege/promotionCourse" target="_blank">已领取课程</a></li>
                    </ul>
                    <ul class="list">
                        <li class="square">
                            <img src="https://img-bss.csdn.net/2019131173815885_39312.png" width="200" height="120">
                            <a class='inner' href="https://edu.csdn.net/teach_course/detail/13" target="_blank" style="font-size:18px;">【Python全栈】第四周 Web前端技术</a><br>
                        </li>
                        <li class="square">
                            <img src="https://img-bss.csdn.net/2019131173157190_35656.png?imageMogr2/auto-orient/thumbnail/400x269!/format/png" width="200" height="120">
                            <a class='inner' href="https://edu.csdn.net/teach_course/detail/13" target="_blank" style="font-size:18px;">【Python全栈】第三周 数据库操作</a></li>
                        <li class="square">
                            <img src="https://img-bss.csdn.net/2019131174552126_91231.png" width="200" height="120">
                            <a class='inner' href="https://edu.csdn.net/teach_course/detail/13" target="_blank" style="font-size:18px;">【Python全栈】第五周 Linux系统操作</a></li>
                        <li class="square">
                            <img src="https://img-bss.csdn.net/201913117347598_69592.png?imageMogr2/auto-orient/thumbnail/400x269!/format/png" width="200" height="120">
                            <a class='inner' href="https://edu.csdn.net/teach_course/detail/13" target="_blank" style="font-size:18px;">【Python全栈】第二周 Python基础(下)</a></li>
                    </ul>
                </div>
                <div id="aside1">
                    <ul style="font-size:16px;font-family:'微软雅黑';margin:7px">                     
                        <li >我是学员</li>
                        <li style="margin:20px"><a href=#>我的课程&emsp;&emsp;→</a></li>
                        <li style="margin:20px"><a href=#>我的会员&emsp;&emsp;→</a></li>
                        <li style="margin:20px"><a href=#>我的红包&emsp;&emsp;→</a></li>
                        <li style="margin:20px"><a href=#>我的提问&emsp;&emsp;→</a></li>
                        <li style="margin:20px"><a href=#>我的订单&emsp;&emsp;→</a></li>
                        <li style="margin:20px"><a href=#>优惠券&emsp;&emsp;&emsp;→</a></li>
                        <li style="margin:20px"><a href="https://edu.csdn.net/mycollege/vipCards" target="_blank">讲师卡&emsp;&emsp;&emsp;→</a></li>
                    </ul>
                </div>
                <div id="aside2">
                    <ul>
                        <li style="margin:0px">&emsp;</li>
                        <li><b>会员特权</b></li>
                        <li style="margin:20px">千门专享课程免费看</li>
                        <li style="margin:20px">精品课程每月免费兑</li>
                        <li style="margin:20px">购课低至8折</li>
                        <li style="margin:20px">600次下载特权</li>
                        <li style="margin:20px">专享讲师社群答疑</li>
                        <li style="margin:20px"><a href="https://mall.csdn.net/vip_code" target="_blank">查看详情</a></li>
                    </ul>
                </div>
            </div>
            <div class="clear"></div>
            <div id="footer">
            
            </div>
        </div>
    </body>
</html>